<template>
  <div class="index-page">
    <pageHead title='新会员注册'></pageHead>
    <div class="form">
      <div class="input">
        <div class="view clearfix name">
          <span class="fl">真实姓名：</span>
          <input
            type="text"
            placeholder="请输入姓名"
            class="fl"
          >
        </div>
      </div>
      <div class="input">
        <div class="view clearfix phone">
          <span class="fl">手机号：</span>
          <input
            type="number"
            placeholder="请输入手机号"
            class="fl"
          >
        </div>
      </div>
      <div class="input">
        <div class="view clearfix password">
          <span class="fl">登录密码：</span>
          <input
            type="password"
            placeholder="请输入登录密码"
            class="fl"
          >
        </div>
      </div>
      <div class="input">
        <div class="view clearfix password_two">
          <span class="fl">二级密码：</span>
          <input
            type="password"
            placeholder="请输入交易密码"
            class="fl"
          >
        </div>
      </div>
      <div class="input">
        <div class="view clearfix vip">
          <span class="fl">推荐会员：</span>
          <input
            type="number"
            placeholder="请输入推荐您的会员手机号"
            class="fl"
          >
        </div>
      </div>
      <div class="input code">
        <div class="view clearfix code">
          <span class="fl">短信验证码：</span>
          <input
            type="text"
            placeholder="请填写短信验证码"
            class="fl"
          >
          <em class="fr">发送验证码</em>
        </div>
      </div>
    </div>
    <div class="btn">确定提交</div>
  </div>
</template>

<script>
import pageHead from '@/components/include/header'
export default {
  components: { pageHead },
  data () {
    return {}
  },
  activated: function () {},
  mounted: function () {},
  methods: {},
  destroyed: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.index-page {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #f3f3f3;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  .form {
    .input {
      background: #fff;
      margin-top: 0.1rem;
      &:first-child {
        margin-top: 0;
      }
      .view {
        height: 1rem;
        line-height: 1rem;
        width: 6.9rem;
        margin-left: auto;
        margin-right: auto;
        span {
          width: 2.5rem;
          font-size: 0.3rem;
          color: #313131;
        }
        input {
          width: 2.45rem;
          height: 1rem;
          font-size: 0.3rem;
        }
        em {
          color: #0192dd;
          font-style: normal;
          font-size: 0.3rem;
        }
      }
    }
  }

  .btn {
    font-size: 0.3rem;
    color: #ffffff;
    text-align: center;
    width: 6rem;
    margin-left: auto;
    margin-right: auto;
    height: 0.8rem;
    line-height: 0.8rem;
    background: #0192dd;
    border-radius: 0.5rem;
    margin-top: 0.6rem;
    cursor: pointer;
  }
}
</style>
